<template>
  <a-button
    :disabled="disabled"
    :type="type"
    :size="size"
    @click.stop="emitClick"
  >
    <slot />
  </a-button>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  props: {
    // 大小
    size: {
      type: String,
      default: () => 'default'
    },

    // 禁用
    disabled: {
      type: Boolean,
      default: () => false
    },

    // 类型
    type: {
      type: String,
      default: () => 'primary'
    },

    // 角色
    role: {
      type: String,
      default: () => ''
    },

    // 权限提示
    tips: {
      type: String,
      default: () => ''
    }
  },

  computed: {
    // 权限
    ...mapGetters(['roles']),

    // 权限判断
    hasAuth() {
      const hasAuth = (this.roles.includes(this.role) || !this.role);
      return hasAuth;
    }
  },

  methods: {
    // 点击事件
    emitClick() {
      if (!this.hasAuth) {
        this.$notification.error({
          message: '无权限，请联系管理员！',
          // message: `当前帐号无权限${this.tips}`,
          duration: 1,
        })
        return this.hasAuth;
      }
      this.$emit('click');
    }
  }
};
</script>
